<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>我的信息页面</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
          crossorigin="anonymous"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>

<style rel="stylesheet" type="text/css">
    #bg {
        width: 100%;
        height: 160px;
        margin-bottom: 10px;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 5px 5px 2.5px #888888;
    }

</style>

<body>

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
    <h5 class="my-0 mr-md-auto font-weight-normal">快马跑腿</h5>
    <nav class="my-2 my-md-0 mr-md-3">
        <a class="p-2 text-dark" th:href="@{/order/index}">首页</a>
        <a class="p-2 text-dark" th:href="@{/order/addForSell}">帮我买</a>
        <a class="p-2 text-dark" th:href="@{/order/addForDeliver}">帮我送</a>
        <a class="p-2 text-dark" th:href="@{/order/addForTake}">帮我取</a>
        <td>
            <a class="p-2 text-dark"  th:if="${session.customer.type ==1}" th:href="@{/client/aboutUs}">关于我们</a>
            <a class="p-2 text-dark"  th:if="${session.customer.type ==2}" th:href="@{/order/list}">我的配送</a>

        </td>
    </nav>
    <nav id="navbar-example2" class="navbar navbar-light bg-light">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
           aria-expanded="false" th:text="${customer.nickname}">昵称</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" th:href="@{/client/info}">个人信息</a>
            <a class="dropdown-item" th:href="@{/order/myOrder}">我的订单</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" th:href="@{/publiz/index}">注销</a>
        </div>
    </nav>
</div>


<div id="accordion" style="margin-left: 10%; margin-right: 10%;margin-top: 3%">


    <div id="bg">

        <img th:src="@{/image/bg.png}" class="img-fluid" width="100%" height="auto"
             style="margin-top: -200px; opacity: 0.5;"/>
        <div style="position:absolute; left:50%; top:24%">
            <img th:src="@{/image/tx.png}" width="100" height="auto" style="border-radius: 50%"/>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                        aria-controls="collapseOne">
                    个人设置
                </button>
            </h5>
        </div>
        <div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">账户</th>
                        <th scope="col">密码</th>
                        <th scope="col">是否成为派送员</th>
                        <th scope="col">申请状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td th:text="${customer.username}">账户</td>
                        <td th:text="${customer.password}">密码</td>
                        <td>
                            <span th:if="${customer.type == 1}">否</span>
                            <span th:if="${customer.type == 2}">是</span>
                        </td>
                        <td>
              <span th:if="${customer.applyStatus == 0}">未申请
               <a th:href="@{/client/apply}">申请</a>
              </span>
                            <span th:if="${customer.applyStatus == 1}" th:text="申请中">申请中</span>
                            <span th:if="${customer.applyStatus == 2}" th:text="申请通过">申请通过</span>
                            <span th:if="${customer.applyStatus == 9}" th:text="申请不通过">申请不通过
                <a th:href="@{/client/apply}">申请</a>
              </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
                        aria-expanded="false"
                        aria-controls="collapseTwo">
                    安全中心
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                <p>暂无消息</p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"
                        aria-expanded="false"
                        aria-controls="collapseThree" onclick="time()">
                    个人二维码
                </button>
            </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
            <div class="card-body" align="center">
                <img th:src="@{/image/code.png}" width="100" height="auto"/>
                <p id="time" style="margin-top: 50px"></p>
            </div>
        </div>
    </div>
</div>
<script>
    function time() {
        var myDate = new Date();
        var mytime = "当前时间：" + myDate.getFullYear() + "." + (myDate.getMonth() + 1) + "." + (myDate.getDay() + 1) + "." + myDate.toLocaleTimeString();
        document.getElementById("time").innerHTML = mytime;
    }

</script>


</body>
</html>
